/* 
https://blufly.media/asset/css/beta/[default].css
*/

a:link {
	
	color: black;
	font-weight: bold;
	text-decoration: none;
	
}

a:hover {
	
	font-weight: bold;
	text-decoration: underline;
	
}

a:visited {
	
	color: black;
	
}

#author {
	
	font-family: 'Marcellus SC', serif;
	text-transform: uppercase;
	font-size: 1.5em;
	text-align: center;

}

@media screen and (max-width : 980px) and (orientation: portrait) {
	
	#author {
		
		font-size: 1.5em;
		
	}
	
}

code {
	
	font-size: 0.9em;
	color: #5E5E5E;
	font-weight: 550;
	
}

.dropcap {
	
	float: left;
	font-size: 4em;
	line-height: 5px;
	padding-top: 32px;
	padding-bottom: 15px;
	padding-right: 12px;
	padding-left: 0px;
	
}

@media screen and (max-width : 980px) and (orientation: portrait) {
	
	.dropcap {
	
		float: left;
		font-size: 4em;
		padding-top: 0.55em;
		padding-bottom: 0.4em;
		padding-right: 0.2em;
		padding-left: 0em;
		
	}
	
}

/* #embedded-index (this is kind of a hack to get the Bluesky blockquotes to (sort of) centre on mobile/portrait) */

@media screen and (max-width : 980px) and (orientation: portrait) {
	
	#embedded-index {
		
		margin-left: 20%;

	}
	
}

.epilogue-text {
	
	font-style: italic;
	padding-bottom: 12em;
	
}

@media screen and (max-width : 980px) and (orientation: portrait) {
	
	.epilogue-text {
		
		padding-bottom: 6em;
		
	}
	
}


/* A hack to get around the weird fact that margin-bottom gets collapsed within a div. */

.extended-flow p:not(:last-child) {
	
	margin-bottom: 2em;

}

.float {
	
	width: 45%; 
	padding-top: 0.4em; 
	padding-bottom: 0.5em;
	
}

.float.left {
	
	 float: left;
	 padding-right: 1.5em;
	
}

.float.right {
	
	 float: right;
	 padding-left: 1.5em;
	 
}

.footnote-separator {
	
	width: 40%;
	margin-left: 0;
	margin-right: auto;
	margin-top: 2.3em;
	margin-bottom: 2em;
	
}

#footnote-text {
	
	font-size: 0.8em;
	padding-bottom: 1em;
	
}

@media screen and (max-width : 980px) and (orientation: portrait) {
	
	#footnote-text {
		
		padding-bottom: 2.5em;
		font-size: 0.55em;
		
	}
	
}

li {
	
	margin-bottom: 1em;	
	
}

.navigation {
	
	height: 2em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 0.5em;
	
}

@media screen and (max-width : 980px) and (orientation: portrait) {
	
	.navigation {
		
		height: 1.5em;
		padding-left: 0.25em;
		padding-right: 0.25em;
		padding-bottom: 0.25em;
		
	}
	
}


.navigation:hover {
	
	cursor: pointer;
	
}

.article-presenter {
	
	position: fixed;
	width: 25%;
	bottom: 0em;
	left: 37.5%;

}

@media screen and (max-width : 980px) and (orientation: portrait) {
	
	.article-presenter {
		
		width: 40%;
		left: 30%;
		
	}
	
}

.article-presenter:hover {
	
	cursor: pointer;

}

.pseudo-emoji {
	
	height: 11px;
	margin-left: 2px; 
	margin-bottom: -1.5px; 
	padding-bottom: 0px; 
	padding-right: 3px; 
	
}

@media screen and (max-width : 980px) and (orientation: portrait) {
	
	.pseudo-emoji {
		
		height: 21px;
		margin-bottom: -2px; 
		margin-left: 4px; 
		padding-right: 6px; 
		
	}
	
}

.section-title {
	
	padding-top: 10px;
    font-family: 'Marcellus SC', serif;
	font-size: 1.2em;
	padding-top: 1.5em;
	
}

.separator {
	
	letter-spacing: 2em;
	text-align: center;
	
}

@media screen and (max-width : 980px) and (orientation: portrait) {
	
	.section-title {
		
		padding-top: 10px;
	    font-family: 'Marcellus SC', serif;
		font-size: 1.2em;
		padding-top: 2em;
		
	}
	
}


.proper-noun {
	
	font-style: italic;
	padding-right: 2px;
	
}

.quoted-text {
	
	font-style: italic;
	
}

.quoted-text:after {
	
	padding-left: 1px;
	content: "\201D";
	padding-right: 2px;
	
}

.quoted-text:before {
	
	content: "\201C";
	padding-right: 1px;
	
}

.superscript {
	
	position: relative;
	top: -.4em;
	font-size: 0.7em;
	padding-right: 2px;
	
}

/* this is the version which is in the footnote */
.superscript.referencee {
	
	padding-right: 0.5em;
	
}

/* this is the version which is in the body of the document */
.superscript.referencer {
	
	padding-left: 0.1em;
	padding-right: 0.2em;
	
}

ul {
	
	padding-top: 1em;
	
}

.wrapper {

	display: grid;
	grid-template-columns: 1fr min(60ch, 100%) 1fr;
	grid-column-gap: 32px;
    font-family: 'Lusitana';
    font-weight: 400;
    color: black;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	padding-right: auto;
	
}

@media screen and (max-width : 980px) and (orientation: portrait) {
	
	.wrapper {
	
		font-size: 2.5em;
		
	}
	
}

.wrapper > * {
	
	grid-column: 2;

}

.full-bleed {

	width: 100%;
	grid-column: 1 / 4;
	
}

/* this is the caption used for the key image */

.caption {
	
	font-family: 'Josefin Sans', sans-serif;
	font-style: normal;
	font-optical-sizing: auto;
	font-weight: 400;
	color: grey;
	text-align: center;
	padding-bottom: 2em;
	font-size: .8em;
	
	width: 80%;
	padding-left: 10%;
	grid-column: 1 / 4;
	
}

/* and this is the caption used for pictures which are 'in-line' in the article */

.caption-inline {
	
	padding-top: 0.5em;
	width: 100%;
	padding-left: 0%;
	grid-column: 2 / 3;
	
}

@media screen and (max-width : 980px) and (orientation: portrait) {
	
	.caption {
		
		padding-bottom: 2.5em;
		font-size: 0.45em;
		
	}
	
	.caption-inline {
		
		padding-top: 1.0em;
		
	}


}

#key-photo {
	
	margin-bottom: 5px;
	
}

/* The date displayed at the bottom of the article. The reason is not called 'publication-dt' is that it potentially may not be that: it could be the date is was last updated at some point in the future. In other words, it's the date shown to the reader without comments on whether it's the original publication date or the updated date. */

#displayed-dt {
	
	font-style: italic;
	text-align: right;
	padding-top: 1.5em;
	
}

#subtitle {
	
	font-style: italic;
	text-align: center;
	font-size: 1.2em;
	padding-bottom: 1.5em;

}

@media screen and (max-width : 980px) and (orientation: portrait) {
	
	#subtitle {
		
		font-size: 1.0em;
		padding-bottom: 1.4em;
		
	}
	
}

#title {
	
    font-family: 'Marcellus SC', serif;
	text-transform: uppercase;
    font-weight: 400;
	font-style: normal;
	text-align: center;
	font-size: 3em;
	padding-bottom: 0.4em;
	padding-top: 1em;
	line-height: 1em;
	
}

@media screen and (max-width : 980px) and (orientation: portrait) {
	
	#title {
		
		font-size: 2em;
		
	}
	
}

ul {
	
	margin-top: 0em;
	font-size: 0.92em;
	margin-bottom: 0em;	
	
}

/* formerly /asset/css/toast-popup.css

inspiration: https://www.w3schools.com/howto/howto_js_snackbar.asp */

#toast-popup {
	
	visibility: hidden; /* Hidden by default. Visible on click */
	width: 100%;
 	background-color: transparent; /* transparent background color */
	position: fixed; /* Sit on top of the screen */
	z-index: 1; /* Add a z-index if needed */
	bottom: 0px; /* 30px from the bottom */
	text-align: center;
	color: grey;
	font-size: 2em;

}

#toast-popup.show {
	
	visibility: visible; /* Show the snackbar */
	-webkit-animation: fadein 0.5s, fadeout 0.5s 10s;
	animation: fadein 0.5s, fadeout 0.5s 10s;

}

@-webkit-keyframes fadein {
	
	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}

}

@keyframes fadein {

	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}

}

@-webkit-keyframes fadeout {
	
	from {bottom: 30px; opacity: 1;}
	to {bottom: 0; opacity: 0;}

}

@keyframes fadeout {
	
	from {bottom: 30px; opacity: 1;}
	to {bottom: 0; opacity: 0;}

}